---
title: Editable
package: "@chakra-ui/editable"
image: "components/editable-text.svg"
description:
  EditableText is used for inline renaming of some text. It appears as normal UI
  text but transforms into a text input field when the user clicks or focuses on
  it.
---

Editable Text is used for inline renaming of some text. It appears as normal UI
text but transforms into a text input field when the user clicks on or focuses
it.

<ComponentLinks
  theme={{ componentName: "editable" }}
  github={{ package: "editable" }}
  npm={{ package: "@chakra-ui/editable" }}
/>

<carbon-ad></carbon-ad>

The text input inherits all font styling from its parent in order to make the
edit and read view transition seamless.

## Import

Chakra UI exports 3 components to handle this functionality.

- `Editable`: The wrapper component that provides context value.
- `EditableInput`: The edit view of the component. It shows when you click or
  focus on the text.
- `EditablePreview`: The read-only view of the component.

```js
import { Editable, EditableInput, EditablePreview } from "@chakra-ui/react"
```

## Usage

```jsx
// Click the text to edit
<Editable defaultValue="Take some chakra">
  <EditablePreview />
  <EditableInput />
</Editable>
```

### With custom controls

In some cases, you might need to use custom controls to toggle the edit and read
mode. We use the render prop pattern to provide access to the internal state of
the component.

```jsx
function CustomControlsExample() {
  /* Here's a custom control */
  function EditableControls() {
    const {
      isEditing,
      getSubmitButtonProps,
      getCancelButtonProps,
      getEditButtonProps,
    } = useEditableControls()

    return isEditing ? (
      <ButtonGroup justifyContent="center" size="sm">
        <IconButton icon={<CheckIcon />} {...getSubmitButtonProps()} />
        <IconButton icon={<CloseIcon />} {...getCancelButtonProps()} />
      </ButtonGroup>
    ) : (
      <Flex justifyContent="center">
        <IconButton size="sm" icon={<EditIcon />} {...getEditButtonProps()} />
      </Flex>
    )
  }

  return (
    <Editable
      textAlign="center"
      defaultValue="Rasengan ⚡️"
      fontSize="2xl"
      isPreviewFocusable={false}
    >
      <EditablePreview />
      <EditableInput />
      <EditableControls />
    </Editable>
  )
}
```

## Props

### Editable Props

<PropsTable of="Editable" />
